<template>
  <div class="toolsBox">
    <div class="tools">
      <span @click="handleAddGeometry('box')">立方体</span>
      <span @click="handleAddGeometry('sphere')">球体</span>
      <span @click="handleAddGeometry('cylinder')">圆柱体</span>
    </div>
    <div class="tools">
      <span @click="handleSave">保存</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { GeometryType } from '../hooks/useLabel'

interface EmitsType {
  (e: 'addGeometry', type: GeometryType): void
  (e: 'save'): void
}
const emit = defineEmits<EmitsType>()

const handleAddGeometry = (type: GeometryType) => {
  emit('addGeometry', type)
}

const handleSave = () => {
  emit('save')
}
</script>

<style scoped lang="scss">
.toolsBox {
  width: 100vw;
  height: 40px;
  background-color: #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tools {
    color: #fff;
    span {
      margin: 0 8px;
      cursor: pointer;
      &:hover {
        opacity: 0.8;
      }
    }
  }
}
</style>
